Change Detection Strategy (OnPush vs Default)

Web Development - অ্যাঙ্গুলার (Angular) - Angular এর এডভান্সড টপিকস |

Angular-এর Change Detection হল একটি গুরুত্বপূর্ণ প্রক্রিয়া যা Angular অ্যাপ্লিকেশনের UI-কে আপডেট রাখে যখন ডেটা পরিবর্তিত হয়। Angular দ্বারা ব্যবহৃত Change Detection Strategy দুটি প্রধানভাবে ব্যবহৃত হয়: Default এবং OnPush।

Change Detection কি?

Change Detection হল Angular-এর একটি প্রক্রিয়া যার মাধ্যমে Angular জানে কখন DOM আপডেট করতে হবে। Angular-এর Change Detection মূলত দুটি কাজ করে:

কম্পোনেন্টের ডেটা চেক করা – Angular জানে কোন ডেটা পরিবর্তিত হয়েছে এবং সেগুলি UI তে রিফ্লেক্ট করে।
UI আপডেট করা – যখন Angular জানতে পারে যে কোনো ডেটা পরিবর্তিত হয়েছে, তখন এটি UI আপডেট করে।

Angular-এর Change Detection ডিফল্টভাবে Default Strategy ব্যবহার করে, যা সমস্ত কম্পোনেন্টের ডেটার ওপর নজর রাখে। তবে, কনফিগারেশনে কিছু পরিবর্তন করলে আপনি OnPush Strategy ব্যবহার করতে পারেন, যা কিছু ক্ষেত্রে পারফরম্যান্স উন্নত করতে সাহায্য করে।

Default Change Detection Strategy

Default Change Detection Strategy হল Angular-এর ডিফল্ট কৌশল, যেখানে Angular সমস্ত কম্পোনেন্টের সমস্ত প্রোপার্টি পরিবর্তন সনাক্ত করে এবং DOM আপডেট করে। এই কৌশলটি প্রতিটি কম্পোনেন্টের প্রতি চেক করার জন্য একটু বেশি ভারী হতে পারে, বিশেষ করে বড় অ্যাপ্লিকেশনগুলির জন্য।

Default Strategy-তে Change Detection

Angular সবসময় Component বা Directive-এর প্রতি পরিবর্তন মনিটর করে। অর্থাৎ, এটি চেক করে যে কোনো input property পরিবর্তিত হয়েছে কি না।
যদি কোন ডেটা পরিবর্তিত হয়, Angular ঐ কম্পোনেন্টের উপর Change Detection চালায় এবং DOM আপডেট করে।
এই প্রক্রিয়াটি ঘনঘন হয়, যার ফলে এটি বড় অ্যাপ্লিকেশনে পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে।

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  changeDetection: ChangeDetectionStrategy.Default
})
export class DefaultComponent {
  data: string = "Hello, World!";
}

এখানে ChangeDetectionStrategy.Default ব্যবহার করা হয়েছে, যা Angular-কে বলে দেয় যে, কম্পোনেন্টের উপর automatically চেক করতে হবে।

OnPush Change Detection Strategy

OnPush Change Detection Strategy হল একটি অপটিমাইজড কৌশল যা Angular-এর Change Detection প্রক্রিয়াকে আরও কার্যকরী করে তোলে, বিশেষ করে বড় অ্যাপ্লিকেশনগুলির জন্য। যখন একটি কম্পোনেন্ট OnPush কৌশল ব্যবহার করে, Angular কেবলমাত্র তখনই Change Detection চালায় যখন:

Input Property পরিবর্তিত হয়।
Event (যেমন, Click বা Submit) ঘটে।
Observable বা Promise এর মান পরিবর্তিত হয়।

এটি Angular-কে পুনরায় চেক করার জন্য কম্পোনেন্টের "input" প্রপার্টি অথবা নির্দিষ্ট পরিবর্তনের উপর নির্ভরশীল করে, তাই এই কৌশলটি অধিক কার্যকরী এবং দ্রুত।

OnPush Strategy-তে Change Detection

OnPush কৌশল ব্যবহার করলে, Angular শুধুমাত্র তখনই Change Detection চালাবে যখন input property, event, অথবা observable পরিবর্তিত হবে।
এই কৌশলটি কম্পোনেন্টের পারফরম্যান্স বাড়াতে সাহায্য করে, কারণ Angular কম্পোনেন্টের প্রতি প্রতিটি চেক করার পরিবর্তে শুধুমাত্র নির্দিষ্ট পরিবর্তনগুলো মনিটর করে।

@Component({
  selector: 'app-onpush',
  templateUrl: './onpush.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {
  @Input() data: string = "Hello, OnPush!";
}

এখানে ChangeDetectionStrategy.OnPush ব্যবহার করা হয়েছে, যা Angular কে বলে দেয় যে শুধুমাত্র data প্রপার্টি পরিবর্তিত হলে Change Detection চালানো হবে।

Default vs OnPush: পারফরম্যান্স পার্থক্য

Default Strategy:
- Angular সকল কম্পোনেন্টের উপর পরিবর্তন চেক করে।
- বড় অ্যাপ্লিকেশনের ক্ষেত্রে অনেক বেশি সিস্টেম রিসোর্স খরচ হতে পারে, কারণ প্রতিটি কম্পোনেন্টের প্রতি পরিবর্তন দেখার জন্য Angular অনেক বার চেক করে।
OnPush Strategy:
- শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের input property পরিবর্তিত হলে অথবা observable পরিবর্তিত হলে Change Detection চলে।
- এটি ছোট অ্যাপ্লিকেশনগুলোতে ব্যবহৃত হতে পারে এবং বড় অ্যাপ্লিকেশনে পারফরম্যান্সের দিক থেকে অনেক উন্নতি এনে দেয়।

কবে OnPush ব্যবহার করা উচিত?

ডেটা পরিবর্তন স্পষ্ট থাকলে, অর্থাৎ, যখন কম্পোনেন্টের ইনপুট প্রপার্টি শুধুমাত্র মিউটেশন (mutations) এর মাধ্যমে পরিবর্তিত হয়।
যখন কম্পোনেন্ট immutable data ব্যবহার করে (যেমন, কোন ডেটা অবজেক্ট বা অ্যারে কখনই সরাসরি পরিবর্তিত হয় না)।
যখন আপনি জানেন যে Change Detection শুধুমাত্র input বা event পরিবর্তনের সময় ঘটবে।

কবে Default ব্যবহার করা উচিত?

যদি আপনি complex UI বা dynamic state পরিচালনা করছেন, যেখানে ইনপুট প্রপার্টি বারবার পরিবর্তিত হয়।
যদি আপনার অ্যাপ্লিকেশনটি ছোট হয় এবং পারফরম্যান্স বিষয়টি এতটা গুরুত্বপূর্ণ না হয়।

সারাংশ

Default Change Detection-এ Angular সবসময় কম্পোনেন্টের উপর Change Detection চালায়, যা পারফরম্যান্সকে প্রভাবিত করতে পারে বড় অ্যাপ্লিকেশনগুলোতে।
OnPush Change Detection শুধুমাত্র ইনপুট প্রপার্টি পরিবর্তন, ইভেন্ট অথবা Observable-এ পরিবর্তন হলে Change Detection চালায়, ফলে এটি পারফরম্যান্সের দিক থেকে অনেক কার্যকরী এবং দ্রুত।

এটি বড় অ্যাপ্লিকেশনগুলির জন্য একটি উত্তম পদ্ধতি, যেখানে কম্পোনেন্টগুলো বড় এবং বারবার আপডেট হয়।

Content added By

Md Azizur Rahman

Change Detection Strategy (OnPush vs Default)

Change Detection Strategy (OnPush vs Default)

Change Detection কি?

Default Change Detection Strategy

Default Strategy-তে Change Detection

OnPush Change Detection Strategy

OnPush Strategy-তে Change Detection

Default vs OnPush: পারফরম্যান্স পার্থক্য

কবে OnPush ব্যবহার করা উচিত?

কবে Default ব্যবহার করা উচিত?

সারাংশ

All Notifications

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, officia!

Promotion